<template>
  <div class="fenqy">
    <div class="operation">
      <el-form :inline="true" :model="form" label-width="90px" class="formList">
        <el-form-item label="选择区域">
          <dx-cascader :area_id.sync="form.areaId" />
        </el-form-item>
        <el-form-item label="账期">
          <el-date-picker v-model="form.month" value-format="yyyyMM" type="month" placeholder="选择月"></el-date-picker>
        </el-form-item>
        <el-form-item label="收入来源">
          <el-input v-model="form.indexSource" placeholder="请输入"/>
        </el-form-item>
        <el-form-item style="width: 30%;">
          <el-button size="small" type="primary" @click="submitHandle()">查询</el-button>
          <!-- <el-button
            size="small"
            type="orange"
            @click="exportExcel(true)"
            style="margin-left: 20px"
          >批量导出</el-button> -->
          <el-button size="small" type="orange" @click="exportExcel()">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tableBox">
      <el-table
        ref="table"
        border
        stripe
        v-loading="tableLoading"
        :data="tableData"
        style="width: 100%"
        class="tableTh28"
        height="65vh"
      >
        <el-table-column :label="item" :prop="propList[index]" :key="index" v-for="(item, index) in tableTitle" min-width="120">
        </el-table-column>
      </el-table>
      <el-pagination class="page" 
        layout="total, prev, pager, next, jumper"
        :page-sizes="[20, 50, 100]"
        @size-change="sizeChange"
        :page-size="pageSize"
        :total="dataTotal"
        :current-page.sync="currentPage"
        @current-change="handleCurrentChange"
    ></el-pagination>
    </div>
  </div>
</template>

<script>
  import { $budgetAPI } from "@/api";
  import { getSessionStorage } from "@/common/js/storage";
  import { createSpanOne } from "@/utils/mixin.js";
  import prefixAPI from "@/api/prefixAPI"
  import {getCookie,setCookie} from '@/common/js/cookie';
  let accountInfo = JSON.parse(getSessionStorage("accountInfo"));
  import { downLoadExcelParams } from "@/utils/zipdownload.js"

  export default {
    data() {
      return {
        tableLoading: false, //
        areaList: [],
        tableData: [],
        form: {
          areaId: accountInfo.areaId,
          month: '',
          indexSource: '',
        },
        pageSize: 20,
        currentPage: 1,
        dataTotal: null,
        tableTitle: [],
        propList: []
      };
    },
    created() {
      this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
      this.getData();
    },
    methods: {
      sizeChange(val) {
        this.pageSize = val;
        this.submitHandle();
      },
      //翻页操作
      handleCurrentChange(page) {
          this.currentPage = page;
          this.submitHandle();
      },
      areaChange() {},
      //分产品导出
      exportExcel() {
        downLoadExcelParams(
          "/mutilIncomeBudget/exportMuilIncomeData",
          {...this.form, token: getCookie("token")}, 
          this.form.month + "各单位横向大合并收入多维表"
        );
      },
      submitHandle() {
        this.getData();
      },
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex == 0) {
          return this.spanArr[rowIndex];
        }
      },
      getData() {
        let areaId = this.form.areaId
          ? this.form.areaId
          : this.accountInfo.areaId;
        let month = this.form.month
          ? this.form.month
          : this.formatDate(new Date());
        this.tableLoading = true;
        $budgetAPI.getMuilIncomeDataList(
          {
            areaId: areaId,
            month: month,
            indexSource: this.form.indexSource,
            currentPage: this.currentPage
          },
          res => {
            this.tableLoading = false;
            if (res.code == 0) {
              console.log(res)
              let content = res.content;
              this.dataTotal = content.data.totalNum
              this.tableData = content.data.items
              this.tableTitle = content.titles
              this.propList = content.keys
            } else {
              this.alertError(res);
            }
          },
          err => {
            this.tableLoading = false;
          }
        );
      },
      formatDate: function(value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? "0" + MM : MM;
        let d = date.getDate();
        d = d < 10 ? "0" + d : d;
        let h = date.getHours();
        h = h < 10 ? "0" + h : h;
        let m = date.getMinutes();
        m = m < 10 ? "0" + m : m;
        let s = date.getSeconds();
        s = s < 10 ? "0" + s : s;
        return y.toString() + MM.toString();
      },
    }
  };
</script>

<style lang="scss">

</style>
